<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多功能表格</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script>

    </script>
</head>

<body>
    <div class="main container">
        <div id="line"></div>
        <div class="row">
            <div class="col-md-12">
                <h1>jquery表格</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-md-1">
                <div class="btn-toolbar" role="toolbar">
                    <div class="btn-group btn-group-vertical">
                        <button id="add" type="button" class="btn btn-default">添加</button>
                        <button id="delete" type="button" class="btn btn-default">删除</button>
                        <button id="edit" type="button" class="btn btn-default">编辑</button>
                    </div>
                    <div class="btn-group btn-group-vertical">
                        <button id="moveUp" type="button" class="btn btn-default">上移</button>
                        <button id="moveDown" type="button" class="btn btn-default">下移</button>
                    </div>
                    <div class="btn-group btn-group-vertical">
                        <button id="allCheck" type="button" class="btn btn-default">全选</button>
                        <button id="cancelCheck" type="button" class="btn btn-default">取消</button>
                        <button id="invertCheck" type="button" class="btn btn-default">反选</button>
                    </div>
                </div>
            </div>
            <div class="col-md-7">
                    <table id="table1" class="table table-striped table-bordered table-hover table-condensed">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>学号</th>
                                    <th>姓名</th>
                                    <th>性别</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr></tr>
                                <tr>
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>0001</td>
                                    <td>浪险</td>
                                    <td>男</td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>0002</td>
                                    <td>浪险</td>
                                    <td>男</td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox" />
                                    </td>
                                    <td>0003</td>
                                    <td>浪险</td>
                                    <td>男</td>
                                </tr>
                                <tr>
                                        <td>
                                            <input type="checkbox" />
                                        </td>
                                        <td>0003</td>
                                        <td>浪险</td>
                                        <td>男</td>
                                    </tr>
                                    <tr>
                                            <td>
                                                <input type="checkbox" />
                                            </td>
                                            <td>0003</td>
                                            <td>浪险</td>
                                            <td>男</td>
                                        </tr>
                            </tbody>
                        </table>
            </div>
            <div class="col-md-4 readme">
                <h4>说明</h4>
                <ol>
                    <li>添加：支持添加信息到表格尾，直接点击添加按钮</li>
                    <li>删除：支持多选删除，直接通过全选反选或自行勾选，再点击删除按钮</li>
                    <li>编辑：支持编辑一行或一单元格，勾选一行，点击编辑或直接双击单元格</li>
                    <li>上移、下移：支持移动一行，勾选后点击上移或下移按钮或点击键盘上下键</li>
                    <li>全选、反选、取消：点击相应按钮对选框进行勾选或取消</li>
                    <li>调列宽：表格列宽可通过将鼠标放至表格边框，按下不放进行拖动，不支持ie浏览器</li>
                    <li>注意：由于表格宽度有限，拉伸宽度至满后不再增加</li>
                </ol>
            </div>
        </div>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        模态框（Modal）标题
                    </h4>
                </div>
                <div class="modal-body">
                    <ul>
                        <li>学号:
                            <input type="text" class="modal−bodyinput">
                        </li>
                        <li>姓名:
                            <input type="text" class="modal−bodyinput">
                        </li>
                        <li>性别:
                            <input type="text" class="modal−bodyinput">
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button id="commit" type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">
                        提交更改
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
</body>

</html>